<template>
	<view>
		<view class="background"></view>
		<view class="body">
			<view class="inputCode">
				<text>输入核销码</text>
				<input class="input" type="text" />
				<button @click="verification">识别</button>
			</view>
			<view v-if="isVerification" class="">
				<view class="title">
					核销码<text>MC1234-5678-9012</text>
				</view>
				<view class="service">
					<view>服务内容</view>
					<view>xxx标准洗车服务包含</view>
					<view>整车泡沫冲洗擦</view>
					<view>轮胎轮毂冲洗清洁</view>
					<view>车内吸尘</view>
					<view>内饰脚垫除尘</view>
				</view>
				<view class="orderInfo">
					<view>订单信息</view>
					<view>订单价格：<text>￥30.00</text></view>
					<view>实付金额：<text style="font-weight: bold;">￥25.00</text></view>
					<view>优惠金额：<text>￥5.00</text></view>
					<view>订单编号：<text></text></view>
					<view>支付时间：<text></text></view>
					<view>预约时间：<text></text></view>
				</view>
			</view>
			<view class="btn" style="background-color: #f0f0f0;" v-if="!isDistory && isVerification">
				<button @click="dialogToggle">确认核销</button>
			</view>
			<view class="btn1" style="background-color: #f0f0f0;" v-if="isDistory">
				<button>已核销</button>
			</view>
			<!-- 弹出层 -->
			<view>
				<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="核销" :title="msgTitle" :content="msgContent" @confirm="dialogConfirm"
						@close="dialogClose" style="text-align: center;" ></uni-popup-dialog>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isVerification: false,
				msgType: '',
				msgTitle: '核销此订单',
				msgContent: '请您仔细核对订单，此操作不可撤销，请谨慎操作！',
				isDistory: false,
			}
		},
		methods: {
			// 识别按钮
			verification(){
				this.isVerification = true
			},
			// 弹出框
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			// 确认核销
			dialogConfirm(){
				this.isDistory = true
			}
		}
	}
</script>

<style>
	page{
		background-color: #f0f0f0;
		padding: 0 20rpx;
	}
	.background {
		width: 750rpx;
		height: 280rpx;
		background-color: #2979ff;
		margin-left: -20rpx;
	}
	.body{
		position: absolute;
		top: 20rpx;
	}
	.body > view {
		background-color: white;
		padding: 0 20rpx;
		width: 670rpx;
		border-radius: 20rpx;
	}
// 输入核销码区域样式	
	.body > .inputCode {
		display: flex;
		height: 100rpx;
		line-height: 100rpx;
		position: relative;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.inputCode > text{
		font-size: 30rpx;
		color: #2979ff;
	}
	.inputCode > .input {
		border: 2rpx solid #c7c7c7;
		position: absolute;
		top: 50%;
		left: 180rpx;
		transform: translateY(-50%);
		height: 70rpx;
		line-height: 70rpx;
		padding-left: 20rpx;
		padding-right: 130rpx;
		width: 360rpx;
		border-radius: 40rpx;
	}
	.inputCode > button {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background-color: #2979ff;
		color: white;
		right: 22rpx;
		height: 60rpx;
		line-height: 60rpx;
		width: 120rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
	}
// 服务区域	
	.title {
			width: 670rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: black;
		}
		.title > text {
			margin-left: 10rpx;
		}
	// 服务内容样式	
		.service {
			border-top: 4rpx solid #e9e9eb;
			border-bottom: 4rpx solid #e9e9eb;
			padding: 20rpx 0;
		}
		.service > view:nth-child(1){
			font-size: 34rpx;
			margin-bottom: 10rpx;
			color: black;
		}
		.service > view {
			height: 50rpx;
			line-height: 50rpx;
		}
		
	// 订单信息样式
		.orderInfo {
			padding: 20rpx 0;
		}
		.orderInfo > view:nth-child(1){
			font-size: 34rpx;
			margin-bottom: 10rpx;
			color: black;
		}
		.orderInfo > view {
			height: 50rpx;
			line-height: 50rpx;
		}
	// 核销按钮样式
		.btn{
			margin-top: 50rpx;
		}
		.btn > button{
			width: 400rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			background-color: #2979ff;
			color: white;
			font-size: 30rpx;
		}
		.btn1 > button{
			margin-top: 50rpx;
			width: 400rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			border-radius: 30rpx;
			background-color: #909399;
			color: white;
			font-size: 30rpx;
		}	
</style>
